import { html } from "htm/preact";
import { useState } from "preact/hooks";

import Button from "../components/Button.component.js";

export default function Phonology() {
  const [form, setForm] = useState({ title: null, vowels: 0, consonants: 0 });

  const onInput = (event) => {
    const field = event.currentTarget.name;
    const value = event.currentTarget.value;

    setForm(Object.assign({}, form, { [field]: value }));
  };

  return html` <div class="page-phonology">
    <div class="form-container">
      <input
        placeholder="Conlang name..."
        type="text"
        value=${form.title}
        name="title"
        id="title"
        onInput=${onInput}
      />
      <${Button} variant="accent" id="generate">Generate<//>
      <input
        type="range"
        name="vowels"
        id="vowels"
        min="1"
        max="25"
        onInput=${onInput}
      />
    </div>
  </div>`;
}
